<template>
  <f7-page>
    <f7-navbar title="添加房型" back-link="Back"></f7-navbar>
    <f7-list inline-labels no-hairlines-md>
      <f7-list-input
        label="名称"
        type="text"
        placeholder="Your name"
        :value="name"
        @input="name = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="价格"
        type="text"
        :value="price"
        @input="price = $event.target.value"
        placeholder="The price"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="类型"
        type="text"
        :value="Type"
        @input="Type = $event.target.value"
        placeholder="The Type"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="面积"
        type="text"
        :value="Area"
        @input="Area = $event.target.value"
        placeholder="The Area"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="窗户"
        type="select"
        defaultValue="Male"
        :value="Window"
        @input="Window = $event.target.value"
      >
        <option value="有">有</option>
        <option value="无">无</option>
      </f7-list-input>
      <f7-list-input
        label="可住人次"
        type="text"
        placeholder="The Capacity"
        :value="Capacity"
        @input="Capacity = $event.target.value"
        clear-button
      ></f7-list-input>
      <div style="padding: 14px;">
        <span class="dibu">选择你的图片</span>
        <uploader></uploader>
      </div>
    </f7-list>
    <f7-button fill raised @click="queding">确定添加</f7-button>
  </f7-page>
</template>
<script>
import axios from "axios";
import qs from "qs";
import uploader from "@/components/upload";
export default {
  components: {
    uploader
  },
  data() {
    return {
      name: "",
      price: "",
      Type: "",
      Area: "",
      Window: "",
      Capacity: ""
    };
  },
  methods: {
    queding() {
      console.log(this.$store.state.apiUpload);
      const self = this;
      const app = self.$f7;
      axios({
        method: "post",
        url: "/caofuying/Room/insertRoom",
        data: qs.stringify({
          name: this.name,
          price: this.price,
          Type: this.Type,
          Area: this.Area,
          Window: this.Window,
          Capacity: this.Capacity
        }),
        headers: {
          sesionid: this.$store.state.apiUpload.id
        }
      }).then(r => {
        const { data } = r;
        if (data == 1) {
          app.dialog.alert(`添加成功`, () => {
            this.$f7router.back("/roomhome/");
          });
        } else if (data == 0) {
          app.dialog.alert("添加失败");
        } else {
          app.dialog.alert("服务器错误");
        }
      });
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 10 * 1024 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "You selected >1M files"
        }).show();
    }
  }
};
</script>
<style scoped>
.uploader {
  padding: 10px;
}
</style>
